<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展示平台</title>
    <link rel="stylesheet" href="assets/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="css/font/iconfont.css" media="all">
    <script src="assets/jquery-1.7.2.min.js"></script>
    <script src="assets/echarts.min.js"></script>
    <script src="js/smoothZoom/jquery.smoothZoom.min.js"></script>
    <!--<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=a77abcf80da93e238a6d36564fbe3ed6"></script>-->
    <style type="text/css">
        html,body{
            margin: 0;
            padding: 0;
            width:100%;
            height: 100%;
            /*color:rgb(0,228,253);*/
            color:#00E4FD;
            overflow: hidden;
        }
        .left {
            position: absolute;
            left: 10px;
            top: 10px;
            bottom: 270px;
            width: 290px;
            background-image: linear-gradient(#062335, #030B1E);
            border: 1px solid #03374D
        }
        .boxl {
            position: absolute;
            left: -1px;
            top: -1px;
            width: 7px;
            height: 7px;
            background: url(images/boxl.png)
        }
        .boxr {
            position: absolute;
            right: -1px;
            top: -1px;
            width: 7px;
            height: 7px;
            background: url(images/boxr.png)
        }
        .boxt {
            position: absolute;
            left: calc(50% - 65px);
            top: -1px;
            width: 130px;
            height: 9px;
            background: url(images/boxt.png)
        }
        .boxl1 {
            position: absolute;
            left: -1px;
            top: calc(50% - 30px);
            width: 5px;
            height: 60px;
            background: url(images/boxl1.png)
        }
        .boxr1 {
            position: absolute;
            right: -1px;
            top: calc(50% - 30px);
            width: 5px;
            height: 60px;
            background: url(images/boxr1.png)
        }
        .boxbl {
            position: absolute;
            left: -1px;
            bottom: -1px;
            width: 7px;
            height: 7px;
            border-radius: 5px;
            background: rgb(0, 230, 250);
        }
        .boxbr {
            position: absolute;
            right: -1px;
            bottom: -1px;
            width: 7px;
            height: 7px;
            border-radius: 5px;
            background: rgb(0, 230, 250);
        }

        .con{
            position: absolute;
            left: 310px;
            top:10px;
            right:310px;
            bottom:270px;
            border: 1px solid #03374D;
        }

        .right{
            position: absolute;
            right: 10px;
            top: 10px;
            bottom: 270px;
            width: 290px;
        }

        .rightop {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            height: 40px;
            background: rgb(29, 232, 249);
            border-radius: 3px;
            text-align: center;
            line-height: 40px;
            color: #000000;
            font-family: "微软雅黑";
            font-weight: bold;
            font-size: 14px;
        }

        .rightB {
            position: absolute;
            left: 0;
            right: 0;
            top: 50px;
            bottom: 0;
            background-image: linear-gradient(#062335, #030B1E);
            border: 1px solid #03374D;
        }

        .bottom {
            position: absolute;
            left: 10px;
            bottom: 10px;
            right: 10px;
            height: 250px;
        }

        .bottomLeft{
            position: absolute;
            left:0;
            top:0;
            bottom:0;
            width:290px;
            background-image: linear-gradient(#062335, #030B1E);
            border: 1px solid #03374D
        }

        .bottomCon{
            position: absolute;
            left: 300px;
            top:0px;
            bottom:0;
            width:calc((100% - 310px)/2);
            background-image: linear-gradient(#062335, #030B1E);
            border: 1px solid #03374D
        }

        .bottomRight{
            position: absolute;
            right: 0;
            top:0;
            bottom:0;
            width:calc((100% - 310px)/2);
            background-image: linear-gradient(#062335, #030B1E);
            border: 1px solid #03374D
        }

        .cen {
            position: absolute;
            left: 10px;
            top: 15px;
            bottom: 10px;
            right: 5px;
            overflow-y: auto;
            padding-right: 5px;
        }

        .cenTitle {
            position: relative;
            text-align: center;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .cenr1 {
            position: relative;
            left: 10px;
            width: 14px;
            height: 14px;
            background: url(images/jtr1.png);
            background-size: 14px 14px;
            display: inline-block;
            vertical-align: middle;
        }

        .cenr {
            width: 14px;
            height: 14px;
            background: url(images/jtr.png);
            background-size: 14px 14px;
            display: inline-block;
            vertical-align: middle;
        }

        .cenl1{
            position: relative;
            right: 10px;
            width: 14px;
            height: 14px;
            background: url(images/jtl1.png);
            background-size: 14px 14px;
            display: inline-block;
            vertical-align: middle;
        }

        .cenl {
            width: 14px;
            height: 14px;
            background: url(images/jtl.png);
            background-size: 14px 14px;
            display: inline-block;
            vertical-align: middle;
        }

        .cenSapn {
            display: inline-block;
            vertical-align: middle;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .cenIcon {
            position: absolute;
            right: 0px;
            top: 2px;
            font-size: 14px;
            cursor: pointer;
        }

        .boxRow {
            border: 1px solid rgb(0, 228, 253);
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 13px;
            cursor: pointer;
            float: left;
            width: calc((33.3333% - 8px))
        }

        .boxSelect{
            margin-top: 5px;
            border: 1px solid rgb(0, 228, 253);
            height: 30px;
            line-height: 30px;
            font-size: 13px;
            cursor: pointer;
            position: relative;
        }

        .selWin {
            position: absolute;
            left: -1px;
            top: 32px;
            right: -1px;
            z-index: 999;
            background: rgb(3, 11, 30);
            border: 1px solid rgb(0, 228, 253);
            padding: 5px 10px;
            line-height: 30px;
            display: none;
        }
        .selWin>ul>li:hover{
            background: rgb(5,29,47);
            color:#fff;
        }

        .boxInput {
            border: 0px;
            background: none;
            color:rgb(0,228,253);
            height: 30px;
            cursor: pointer;
            padding: 0 10px;
            /*text-align: center;*/
        }
        input::-webkit-input-placeholder {
            /* WebKit browsers */
            color:rgb(3,133,155);
        }
        input:-moz-placeholder {
            /* Mozilla Firefox 4 to 18 */
            color:rgb(3,133,155);
        }
        input::-moz-placeholder {
            /* Mozilla Firefox 19+ */
            color:rgb(3,133,155);
        }
        input:-ms-input-placeholder {
            /* Internet Explorer 10+ */
            color:rgb(3,133,155);
        }

        .divSearch {
            position: absolute;
            left: 0;
            right: 5px;
            top: 115px;
            bottom: 0px;
            padding: 0 10px;
            overflow-y: auto;
            font-size: 13px;
            line-height: 34px;
        }
        .divSearch>ul>li>span {
            display: inline-block;
            cursor: pointer;
        }
        .projName {
            width: calc(100% - 60px);
            margin-right: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: middle
        }
        .projRadius {
            width: 10px;
            height: 10px;
            border-radius: 10px;
            margin-right: 5px;
        }

        .projColor1 {
            background: rgb(234, 66, 69);
        }
        .projColor2 {
            background: rgb(155, 163, 167);
        }
        .projColor3 {
            background: rgb(263, 253, 253);
        }

        .boxCen {
            position: absolute;
            left: 0;
            right: 0;
            top: 30px;
            bottom: 0;
            padding: 10px;
            overflow-y: auto;
        }

        .alarmTitle {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: middle;
            line-height: 30px;
        }
        .alarmPorj {
            display: inline-block;
            width: calc(100% - 85px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: middle;
            font-size: 12px;
            color:rgb(3,133,155);
            line-height: 20px;
            margin-bottom: 10px;
        }
        .alarmTime {
            display: inline-block;
            width: 80px;
            vertical-align: middle;
            text-align: right;
            font-size: 12px;
            color:rgb(3,133,155);
            line-height: 20px;
            margin-bottom: 10px;
        }


        .smooth_zoom_preloader
        {
            background-image: url(js/smoothZoom/preloader.gif);
        }
        .smooth_zoom_icons
        {
            background-image: url(js/smoothZoom/icons.png);
        }
        #zoom_container .landmarks {
            position: absolute;
            z-index: 10;
            top: 0;
            left: 0;
            font-family: Helvetica, Arial, Verdana;
            font-size: 12px;
            color: #fff
        }

        #zoom_container .landmarks .item {
            position: absolute;
            text-align: center;
            display: none
        }

        #zoom_container .landmarks .lable div {
            width: 100px;
            padding: 4px
        }

        #zoom_container .landmarks .mark .text {
            padding: 2px 6px;
            background-color: #000
        }

        .markItem {
            position: absolute;
            top:-150px;
            border-radius: 10px;
            background-image: linear-gradient(rgba(6,35,53,0.9), rgba(3,11,30,0.9));
            border: 1px solid #03374D;
            width:220px;
            height: 150px;
            border: 1px solid #03374D;
            color:rgb(0,228,253);
            display: none;
            z-index: 999;
        }

        .markClose{
            position: absolute;
            top:0px;
            right:0px;
            width:12px;
            height: 12px;
            background: rgb(6,35,53);
            border-radius: 10px;
            cursor: pointer;
        }
        .markSpanBg {
            display: inline-block;
            background: #03374D;
            width: 70px;
            padding-right: 10px;
            margin-right: 10px;
            text-align: right;
        }

        thead>tr {
            background: rgb(3, 44, 64);
        }
        table td{
            padding: 0px 10px;
            line-height: 30px;
            white-space: nowrap;
            text-align: center;
        }

        tbody>tr:nth-child(even){
            background: rgb(3, 44, 64);
        }
    </style>
</head>
<body>
<div id="left" class="left">
    <div class="boxl"></div>
    <div class="boxr"></div>
    <div class="boxt"></div>
    <div class="boxl1"></div>
    <div class="boxr1"></div>
    <div class="boxbl"></div>
    <div class="boxbr"></div>
    <div class="cen">
        <div id="boxRow">
            <div id="bulidBe" class="boxRow">在建用地</div>
            <div id="bulidEnd" class="boxRow" style="margin: 0 9px;">已建用地</div>
            <div id="bulidPlan" class="boxRow">规划用地</div>
            <div style="clear:both"></div>
        </div>

        <div id="boxSelect" class="boxSelect">
            <input id="selInput" type="text" readonly value="请选择用地类型" class="boxInput" style=" width: calc(100% - 50px);">
            <i id="selBtn" class="iconfont">&#xe62a;</i>
            <div id="selWin" class="selWin">
                <ul>
                    <li>请选择用地类型</li>
                    <li>居住用地（R）</li>
                    <li>商业服务业设施用地（B）</li>
                    <li>公共管理与公共设施用地（A）</li>
                    <li>绿地与广场用地（G）</li>
                </ul>
            </div>
        </div>

        <div class="boxSelect" style="border-radius: 15px;">
            <input type="text" placeholder="输入检索项目名称" class="boxInput" style=" width: calc(100% - 50px);">
            <i id="searchBtn" class="iconfont">&#xe73c;</i>
        </div>

        <div class="divSearch">
            <ul id="divSearch">
                <!--<li>-->
                    <!--<span class="projName">名称</span>-->
                    <!--<span class="projRadius projColor1"></span>-->
                    <!--<span >在建</span>-->
                <!--</li> -->

            </ul>
        </div>
    </div>
</div>

<div id="con" class="con">
    <div id="zoom_container" style="text-align:center;width:100%;height: 100%;">
        <img id="MAP" src="images/map/2020.jpg"  alt="地图"/>
        <div id="mark" class="landmarks" data-show-at-zoom="100" data-allow-drag="true">

        </div>
    </div>
    <div id="mapBtn" style="position: absolute;z-index: 999; right:10px;bottom:10px; height: 30px;width:30px; background: rgba(3, 44, 64,0.8); text-align: center;line-height: 30px; cursor: pointer">
        <i class="iconfont" style="font-size: 24px;">&#xe60a;</i>
    </div>
</div>

<div id="right" class="right">
    <div class="rightop" style="cursor: pointer">
        年轮图展示
    </div>
    <div class="rightB">
        <div class="boxl"></div>
        <div class="boxr"></div>
        <div class="boxt"></div>
        <div class="boxl1"></div>
        <div class="boxr1"></div>
        <div class="boxbl"></div>
        <div class="boxbr"></div>
        <div class="cen">
            <div class="cenTitle">
                <div class="cenr1"></div>
                <div class="cenr"></div>
                <span class="cenSapn">项目概况</span>
                <div class="cenl"></div>
                <div class="cenl1"></div>
            </div>

            <div class="boxCen">
                <div style="position: absolute;left:0;right:0;top:0; height: 48%;">
                    <div id="pie1" style="width:100%;height: 100%"></div>
                </div>
                <div style="position: absolute;left:0;right:0;bottom:0;top:50%;">
                    <div id="pie2" style="width:100%;height: 100%"></div>
                </div>
            </div>

        </div>
    </div>

</div>

<div id="bottom" class="bottom">
    <div class="bottomLeft">
        <div class="boxl"></div>
        <div class="boxr"></div>
        <div class="boxt"></div>
        <div class="boxl1" style="top:20%;"></div>
        <div class="boxr1" style="top:20%;"></div>
        <div class="boxbl"></div>
        <div class="boxbr"></div>
        <div class="cen">
            <div class="cenTitle">
                <div class="cenr1"></div>
                <div class="cenr"></div>
                <span class="cenSapn">最新预警</span>
                <div class="cenl"></div>
                <div class="cenl1"></div>
            </div>
            <div id="divAlarm" class="boxCen">
                <ul id="ul1"></ul>
                    <!--<li>-->
                        <!--<div class="alarmTitle">最新预警最新预警最新预警最新预警最新预警最新预警最新预警</div>-->
                        <!--<span class="alarmPorj">建设项目：万达万达万达万达万达万达</span>-->
                        <!--<span class="alarmTime">2020/99/99</span>-->
                    <!--</li>-->
                <ul id="ul2"></ul>
            </div>
        </div>
    </div>

    <div class="bottomCon">
        <div class="boxl"></div>
        <div class="boxr"></div>
        <div class="boxt"></div>
        <div class="boxl1" style="top:20%;"></div>
        <div class="boxr1" style="top:20%;"></div>
        <div class="boxbl"></div>
        <div class="boxbr"></div>
        <div class="cen">
            <div class="cenTitle">
                <div class="cenr1"></div>
                <div class="cenr"></div>
                <span class="cenSapn">2020年天府总部商务区核心区</span>
                <div class="cenl"></div>
                <div class="cenl1"></div>
                <i id="iconBtn1" class="iconfont icon-biaoge cenIcon"></i>
            </div>
            <div class="boxCen" style="padding: 0px; overflow-x: auto">
                <div id="chart1" style="min-width: 800px;height: 100%;"></div>
                <div id="table1" style="min-width: 800px;height: 100%; display: none">
                    <table cellspacing="0" cellpadding="0">
                        <thead>
                        <tr>
                            <td>序号</td>
                            <td>用地类型</td>
                            <td>规划用地面积（公顷）</td>
                            <td>已建用地（公顷）</td>
                            <td>在建用地（公顷）</td>
                            <td>规划用地（公顷）</td>
                            <td>总建筑面积（万平方米）</td>
                            <td>已建项目（万平方米）</td>
                            <td>在建项目（万平方米）</td>
                            <td>规划项目（万平方米）</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td>居住用地（R)</td>
                            <td>76.17</td>
                            <td>4.37</td>
                            <td>19.96</td>
                            <td>51.84</td>
                            <td>233.11</td>
                            <td>14.84</td>
                            <td>76.72</td>
                            <td>141.55</td>
                        </tr>
                        <tr>

                            <td>2</td>
                            <td>商业服务业设施用地(B)</td>
                            <td>187.03</td>
                            <td>9.26</td>
                            <td>52.17</td>
                            <td>125.6</td>
                            <td>895.14</td>
                            <td>41.14</td>
                            <td>281.89</td>
                            <td>572.11</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>公共管理与公服设施用地（A)</td>
                            <td>126.42</td>
                            <td>76.56</td>
                            <td>20.17</td>
                            <td>29.69</td>
                            <td>114.4</td>
                            <td>52.01</td>
                            <td>24.94</td>
                            <td>37.45</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>绿地与广场用地（G)</td>
                            <td>197.14</td>
                            <td>—</td>
                            <td>—</td>
                            <td>—</td>
                            <td>—</td>
                            <td>—</td>
                            <td>—</td>
                            <td>—</td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>合计</td>
                            <td>586.76</td>
                            <td>90.19</td>
                            <td>92.3</td>
                            <td>207.13</td>
                            <td>1242.65</td>
                            <td>107.99</td>
                            <td>383.55</td>
                            <td>751.11</td>
                        </tr>
                        <tr>
                            <td>备注</td>
                            <td>除道路外总用地面积</td>
                            <td>631.84 </td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>总范围面积</td>
                            <td>848</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="bottomRight">
        <div class="boxl"></div>
        <div class="boxr"></div>
        <div class="boxt"></div>
        <div class="boxl1" style="top:20%;"></div>
        <div class="boxr1" style="top:20%;"></div>
        <div class="boxbl"></div>
        <div class="boxbr"></div>
        <div class="cen">
            <div class="cenTitle">
                <div class="cenr1"></div>
                <div class="cenr"></div>
                <span class="cenSapn">2020年成都科学城起步区</span>
                <div class="cenl"></div>
                <div class="cenl1"></div>
                <i id="iconBtn2" class="iconfont icon-biaoge cenIcon"></i>
            </div>
            <div class="boxCen" style="padding: 0px; overflow-x: auto">
                <div id="chart2" style="min-width: 800px;height: 100%;"></div>
                <div id="table2" style="min-width: 800px;height: 100%; display: none">
                    <table cellspacing="0" cellpadding="0">
                        <thead >
                        <tr>
                            <td>序号</td>
                            <td>用地类型</td>
                            <td>规划用地面积（公顷）</td>
                            <td>已建用地（公顷）</td>
                            <td>在建用地（公顷）</td>
                            <td>规划用地（公顷）</td>
                            <td>总建筑面积（万平方米）</td>
                            <td>已建项目（万平方米）</td>
                            <td>在建项目（万平方米）</td>
                            <td>规划项目（万平方米）</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td>居住用地（R)</td>
                            <td>250.62</td>
                            <td>54.63</td>
                            <td>47.26</td>
                            <td>148.73</td>
                            <td>605.19</td>
                            <td>163.79</td>
                            <td>142.48</td>
                            <td>298.92</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>商业服务业设施用地(B)</td>
                            <td>444.85</td>
                            <td>106.46</td>
                            <td>57.58</td>
                            <td>280.81</td>
                            <td>1067.26</td>
                            <td>301.55</td>
                            <td>136.43</td>
                            <td>629.28</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>公共管理与公服设施用地（A)</td>
                            <td>224.69</td>
                            <td>104.63</td>
                            <td>28.88</td>
                            <td>91.18</td>
                            <td>364.96</td>
                            <td>189.93</td>
                            <td>36.93</td>
                            <td>138.1</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>绿地与广场用地（G)</td>
                            <td>221.52</td>
                            <td>—</td>
                            <td>—</td>
                            <td>—</td>
                            <td>—</td>
                            <td>—</td>
                            <td>—</td>
                            <td>—</td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>合计</td>
                            <td>1141.68</td>
                            <td>265.72</td>
                            <td>133.72</td>
                            <td>520.72</td>
                            <td>2037.41</td>
                            <td>655.27</td>
                            <td>315.84</td>
                            <td>1066.3</td>
                        </tr>
                        <tr>
                            <td>备注</td>
                            <td>除道路外总用地面积</td>
                            <td>2014.64</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>总范围面积</td>
                            <td>2448</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>

</body>
<script>
    $().ready(function () {


        $("#bulidBe").click(function () {
            var cs = $(this).attr("class");
            if (cs.indexOf("projColor1") > -1) {
                $(this).removeClass("projColor1");
                $(this).css("color", "#00E4FD");
            } else {
                $(this).addClass("projColor1")
                $(this).css("color", "#333")
            }
        })

        $("#bulidEnd").click(function () {
            var cs = $(this).attr("class");
            if (cs.indexOf("projColor2") > -1) {
                $(this).removeClass("projColor2");
                $(this).css("color", "#00E4FD");
            } else {
                $(this).addClass("projColor2");
                $(this).css("color", "#333")
            }
        })

        $("#bulidPlan").click(function () {
            var cs = $(this).attr("class");
            if (cs.indexOf("projColor3") > -1) {
                $(this).removeClass("projColor3");
                $(this).css("color", "#00E4FD");
            } else {
                $(this).addClass("projColor3");
                $(this).css("color", "#333");
            }
        })

        $("#selInput").click(function () {
            $("#selWin").toggle();
        })
        $("#selBtn").click(function () {
            $("#selWin").toggle();
        })

        $.each($("#selWin").find("li"), function (i, t) {
            $(t).click(function () {
                var v = $(t).html();
                $('#selInput').val(v);
                $("#selWin").hide();
            })
        })

        searchHtml();
        $("#searchBtn").click(function () {
            searchHtml();
        })

        getAlarmAjax();
        beginroll();

        var map = $('#MAP').smoothZoom({
//            width: w,
//            height: h,
            initial_ZOOM: 20,  //初始倍数 ，默认显示全部
            //zoom_MAX: 400,      //最大倍数 百分比
            //zoom_MIN: 50,       //最小倍数
            //                pan_BUTTONS_SHOW: "YES",
            //    pan_LIMIT_BOUNDARY: "YES",
            //                button_SIZE: 24,
            button_ALIGN: "top right",  //按钮位置
            //                border_TRANSPARENCY: 20,
            //                button_AUTO_HIDE: "YES",
            //                button_AUTO_HIDE_DELAY: 2,
            container: 'zoom_container',
            responsive: true,  //响应式
            responsive_maintain_ratio: true,
            background_COLOR: 'rgb(7,48.103)',
            border_SIZE: 0,
            border_COLOR: '#000000',
            button_BG_COLOR:"rgba(3, 44, 64)",
            button_BG_TRANSPARENCY:80
        });

        chart1();
        chart2();
        pie1();
        pie2();

        setInterval(function () {
            chart1();
            chart2();
            pie1();
            pie2();
        },5000)

        $("#iconBtn1").click(function () {
            var icon = $("#iconBtn1").attr("class");
            if (icon.indexOf("icon-biaoge")>-1) {
                $("#chart1").hide();
                $("#table1").show();
                $("#iconBtn1").removeClass("icon-biaoge");
                $("#iconBtn1").addClass("icon-772bianjiqi_tubiao");
            } else {
                $("#chart1").show();
                $("#table1").hide();
                $("#iconBtn1").addClass("icon-biaoge");
                $("#iconBtn1").removeClass("icon-772bianjiqi_tubiao");
            }
        })

        $("#iconBtn2").click(function () {
            var icon = $("#iconBtn2").attr("class");
            if (icon.indexOf("icon-biaoge")>-1) {
                $("#chart2").hide();
                $("#table2").show();
                $("#iconBtn2").removeClass("icon-biaoge");
                $("#iconBtn2").addClass("icon-772bianjiqi_tubiao");
            } else {
                $("#chart2").show();
                $("#table2").hide();
                $("#iconBtn2").addClass("icon-biaoge");
                $("#iconBtn2").removeClass("icon-772bianjiqi_tubiao");
            }
        })

        var isQp=false;
        $("#mapBtn").click(function () {
            if(isQp==false){
                isQp=true;
                $("#left").animate({left: "-300px"});
                $("#right").animate({right: "-300px"});
                $("#bottom").animate({bottom: "-260px"});
                $("#con").animate({bottom: "10px",left: "10px",right: "10px"});
                $("#zoom_container").animate({width:"100%",height:"100%"})
                $("#mapBtn").find("i").html("&#xe616;");
            }else{
                isQp=false;
                $("#left").animate({left: "10px"});
                $("#right").animate({right: "10px"});
                $("#bottom").animate({bottom: "10px"});
                $("#con").animate({bottom: "270px",left: "310px",right: "310px"});
                $("#zoom_container").animate({width:"100%",height:"100%"})
                $("#mapBtn").find("i").html("&#xe60a;");
            }

        })


    })


    function getProjAjax() {
        var data = [
            {name: "天府国际金融中心", status: 1},
            {name: "西部博览城", status: 2},
            {name: "独角兽岛", status: 1},
            {name: "中冶天府大厦", status: 3},
            {name: "天府九中", status: 2},
            {name: "天投集团", status: 3},
            {name: "华西天府医院", status: 1},
            {name: "天府青蓉中心C,D中心", status: 3},
            {name: "西部博览城", status: 2},
            {name: "独角兽岛", status: 1}
        ];
        var json=[];
        for(var i=0;i<10;i++) {
            var n = rnd(0, 9);
            json.push(data[n]);
        }
        var html = "";
        $.each(json, function (i, t) {
            html += '<li>';
            html += '<span class="projName">' + t.name + '</span>';
            var cls = "";
            var proj = "";
            if (t.status == 1) {
                cls = "projColor1";
                proj = "在建";
            } else if (t.status == 2) {
                cls = "projColor2";
                proj = "已建";
            } else if (t.status == 3) {
                cls = "projColor3";
                proj = "规划";
            }
            html += '<span class="projRadius ' + cls + '"></span>';
            html += '<span >' + proj + '</span>';
            html += '</li>';
        })
        $("#divSearch").html(html);
    }
    
    function getAlarmAjax() {
        var json = [
            {title: "中海项目预计5月完成，现已超期", name: "中海", time: "2020.3.20"},
            {title: "天投集团项目预计5月完成，现已超期", name: "天投集团", time: "2020.3.14"},
            {title: "天府青蓉中心项目预计4月完成，现已超期", name: "天府青蓉中心", time: "2020.3.12"}
        ]
        var html = "";
        $.each(json, function (i, t) {
            html += '<li>';
            html += '<div class="alarmTitle">' + t.title + '</div>';
            html += '<span class="alarmPorj">建设项目：' + t.name + '</span>';
            html += '<span class="alarmTime">' + t.time + '</span>';
            html += '</li>';
        })
        $("#ul1").html(html);
    }

    function beginroll(){
        var speed = 20
        var demoScrollTop = $("#divAlarm").scrollTop();
        var demo1OffsetHeight = $("#ul1").height();
        var demohtml= $("#ul1").html();
        $("#ul2").html(demohtml);
        function Marquee() {
            if (demoScrollTop >= demo1OffsetHeight) {
                demoScrollTop = 0;
            } else {
                demoScrollTop = demoScrollTop + 1;
            }
            $("#divAlarm").scrollTop(demoScrollTop);
        }
        var MyMar = setInterval(Marquee, speed);
        $("#divAlarm").mouseover(function(){
            clearInterval(MyMar);
        })
        $("#divAlarm").mouseout(function(){
            MyMar = setInterval(Marquee, speed);
        })

    }

    function rnd(n, m){
        var random = Math.floor(Math.random()*(m-n+1)+n);
        return random;
    }


    function searchHtml() {
        var data = [{title: "天府国际金融中心",status:1, point: "4500,1620", x: 4500, y: 1620},
            {title: "西部博览园",status:2, point: "4500,2000", x: 4500, y: 2000},
            {title: "独角兽岛",status:3, point: "6750,3500", x: 6750, y: 3500},
            {title: "中冶天府大厦",status:1, point: "5050,1400", x: 5050, y: 1400},
            {title: "天府九中",status:2, point: "6240,2650", x: 6240, y: 2650},
            {title: "天投集团",status:3, point: "7950,3700", x: 7950, y: 3700},
            {title: "华西天府医院",status:2, point: "3250,3800", x: 3250, y: 3800},
            {title: "天府青蓉中心C,D区",status:1, point: "3700,3500", x: 3700, y: 3500},
            {title: "正大集团",status:2, point: "2750,2250", x: 2750, y: 2250},
        ];

        var html = '';
        var marks = '';
        $.each(data, function (i, t) {
            marks += markHtml(i, t);
            html += '<li onclick="mapFun(' + t.x + ',' + t.y + ',' + i + ',\'' + t.title + '\')">';
            html += '<span class="projName">' + t.title + '</span>';
            var cls = "";
            var proj = "";
            if (t.status == 1) {
                cls = "projColor1";
                proj = "在建";
            } else if (t.status == 2) {
                cls = "projColor2";
                proj = "已建";
            } else if (t.status == 3) {
                cls = "projColor3";
                proj = "规划";
            }
            html += '<span class="projRadius ' + cls + '"></span>';
            html += '<span >' + proj + '</span>';
            html += '</li>';
            html += '</div>';
        })
        $('#divSearch').html(html);
        $('#mark').html(marks);
    }

    function markHtml(i,t) {
        var html = '';
        html += '<div class="item mark" data-position="' + t.point + '" data-show-at-zoom="0">';
        html += '<div class="markItem"  id="point' + i + '" >';
        html += '<img ontouchstart="closeMark(' + i + ')" onclick="closeMark(' + i + ')"  class="markClose" src="images/map/Close2.png">';
        html += '<div style="border-bottom:1px solid rgb(3,133,155);line-height: 30px;cursor: pointer;" ontouchstart="openItem()" onclick="openItem()">'+t.title+'</div>';
        html += '<ul style="text-align: left;line-height: 28px;">';
        html += '<li>';
        html += '<span class="markSpanBg">建设单位</span>';
        html += '<span>'+t.title+'</span>';
        html += '</li>';
        html += '<li>';
        html += '<span class="markSpanBg">施工单位</span>';
        html += '<span>建筑有限公司</span>';
        html += '</li>';
        html += '<li>';
        html += '<span class="markSpanBg">监理单位</span>';
        html += '<span>四川一级监理</span>';
        html += '</li>';
        html += '<li>';
        html += '<span class="markSpanBg">设计单位</span>';
        html += '<span>成都设计公司</span>';
        html += '</li>';
        html += '</ul>';
        html += '</div>';
        html += '<img src="images/map/point.png" width="32px" height="32px" ontouchstart="openMark(' + i + ')" onclick="openMark(' + i + ')" style="cursor: pointer"/>';
        html += '</div>';
        return html;
    }

    function mapFun(x,y,i,title) {
        $('#MAP').smoothZoom('focusTo', {x: x, y: y, zoom: 65});
        openMark(i);
    }

    function closeMark(i) {
        $('#point' + i).hide();
    }

    function openMark(i) {
        $.each($('#mark').find(".markItem"),function (i, t) {
            $(t).hide();
        })
        $('#point' + i).show();
    }

    var chart_1,chart_2,pie_1,pie_2;
    function chart1() {
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
                textStyle: {
                    color: "#00E4FD"
                },
                formatter: '（公顷）规划用地面积: {c3}<br/>{a0}:{c0} {a1}:{c1} {a2}:{c2}' +
                '<br/>（万平方米）总建筑面积:{c7}<br/>{a4}:{c4} {a5}:{c5} {a6}:{c6}'
            },
            grid: {
                left: 10,
                right: 10,
                bottom: 10,
                top: 35,
                containLabel: true
            },
            legend: {
                data: ['已建用地', '在建用地', '规划用地'],
                left: 0,
                textStyle: {
                    color: '#00E4FD'
                }
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['居住用地（R)', '商业服务业设施用地(B)', '公共管理与公服设施用地（A)', '绿地与广场用地（G)', '合计'],
                    axisLine: {
                        lineStyle: {
                            color: '#00E4FD'
                        }
                    },
                    axisLabel: {interval: 0}
                }

            ],
            yAxis: [{
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#00E4FD'
                    }
                },
                splitLine: {
                    show: false
                }
            }],
            series: [
                {
                    name: '已建用地',
                    type: 'bar',
                    barWidth: 10,
                    stack: '公顷',
                    data: [4.37, 9.26, 76.56, 0, 90.19],
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgb(155,163,167)'
                            }, {
                                offset: 1,
                                color: 'rgb(222,225,230)'
                            }])
                        }
                    }
                },
                {
                    name: '在建用地',
                    type: 'bar',
                    barWidth: 10,
                    stack: '公顷',
                    data: [19.96, 52.17, 20.17, 0, 92.3],
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgb(234,66,69)'
                            }, {
                                offset: 1,
                                color: 'rgb(198,60,38)'
                            }])
                        }
                    }
                },
                {
                    name: '规划用地',
                    type: 'bar',
                    barWidth: 10,
                    stack: '公顷',
                    data: [51.84, 125.6, 29.69, 0, 207.13],
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgb(255,253,253)'
                            }, {
                                offset: 1,
                                color: 'rgb(240,255,240)'
                            }])
                        }
                    }
                },
                {
                    name: '规划用地面积',
                    type: 'bar',
                    barWidth: 10,
                    data: [76.17, 187.03, 126.42, 197.14, 586.76],
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgb(0,202,220)'
                            }, {
                                offset: 1,
                                color: 'rgb(17,85,104)'
                            }])
                        }
                    }
                },
                {
                    name: '已建用地',
                    type: 'bar',
                    barWidth: 10,
                    stack: '平方米',
                    data: [14.84, 41.14, 52.01, 0, 107.99],
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgb(155,163,167)'
                            }, {
                                offset: 1,
                                color: 'rgb(222,225,230)'
                            }])
                        }
                    }
                },
                {
                    name: '在建用地',
                    type: 'bar',
                    barWidth: 10,
                    stack: '平方米',
                    data: [76.72, 281.89, 24.94, 0, 383.55],
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgb(234,66,69)'
                            }, {
                                offset: 1,
                                color: 'rgb(198,60,38)'
                            }])
                        }
                    }
                },
                {
                    name: '规划用地',
                    type: 'bar',
                    barWidth: 10,
                    stack: '平方米',
                    data: [141.55, 572.11, 37.45, 0, 751.11],
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgb(255,253,253)'
                            }, {
                                offset: 1,
                                color: 'rgb(240,255,240)'
                            }])
                        }
                    }
                },
                {
                    name: '规划用地面积',
                    type: 'bar',
                    barWidth: 10,
                    data: [233.11, 895.14, 114.4, 0, 1242.65],
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgb(0,202,220)'
                            }, {
                                offset: 1,
                                color: 'rgb(17,85,104)'
                            }])
                        }
                    }
                },
            ]
        };
        chart_1 = mychart("chart1", option);
    }

    function chart2() {
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
                textStyle:{
                    color:"#00E4FD"
                },
                formatter: '（公顷）规划用地面积: {c3}<br/>{a0}:{c0} {a1}:{c1} {a2}:{c2}'+
                '<br/>（万平方米）总建筑面积:{c7}<br/>{a4}:{c4} {a5}:{c5} {a6}:{c6}'
            },
            grid: {
                left: 10,
                right: 10,
                bottom: 10,
                top: 35,
                containLabel: true
            },
            legend: {
                data: ['已建用地', '在建用地', '规划用地'],
                left: 0,
                textStyle: {
                    color: '#00E4FD'
                }
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['居住用地（R)', '商业服务业设施用地(B)', '公共管理与公服设施用地（A)', '绿地与广场用地（G)','合计'],
                    axisLine: {
                        lineStyle: {
                            color: '#00E4FD'
                        }
                    },
                    axisLabel:{interval:0}
                }

            ],
            yAxis: [{
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#00E4FD'
                    }
                },
                splitLine: {
                    show: false
                }
            }],
            series: [
                {
                    name: '已建用地',
                    type: 'bar',
                    barWidth: 10,
                    stack: '公顷',
                    data: [54.63, 106.46, 104.63, 0, 265.72],
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgb(155,163,167)'
                            }, {
                                offset: 1,
                                color: 'rgb(222,225,230)'
                            }])
                        }
                    }
                },
                {
                    name: '在建用地',
                    type: 'bar',
                    barWidth: 10,
                    stack: '公顷',
                    data: [47.26, 57.58, 28.88, 0, 133.72],
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgb(234,66,69)'
                            }, {
                                offset: 1,
                                color: 'rgb(198,60,38)'
                            }])
                        }
                    }
                },
                {
                    name: '规划用地',
                    type: 'bar',
                    barWidth: 10,
                    stack: '公顷',
                    data: [148.73, 280.81, 91.18, 0, 520.72],
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgb(255,253,253)'
                            }, {
                                offset: 1,
                                color: 'rgb(240,255,240)'
                            }])
                        }
                    }
                },
                {
                    name: '规划用地面积',
                    type: 'bar',
                    barWidth: 10,
                    data: [250.62, 444.85, 224.69, 221.52, 1141.68],
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgb(0,202,220)'
                            }, {
                                offset: 1,
                                color: 'rgb(17,85,104)'
                            }])
                        }
                    }
                },
                {
                    name: '已建用地',
                    type: 'bar',
                    barWidth: 10,
                    stack: '平方米',
                    data: [163.79, 301.55, 189.93, 0, 655.27],
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgb(155,163,167)'
                            }, {
                                offset: 1,
                                color: 'rgb(222,225,230)'
                            }])
                        }
                    }
                },
                {
                    name: '在建用地',
                    type: 'bar',
                    barWidth: 10,
                    stack: '平方米',
                    data: [142.48, 136.43, 36.93, 0, 315.84],
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgb(234,66,69)'
                            }, {
                                offset: 1,
                                color: 'rgb(198,60,38)'
                            }])
                        }
                    }
                },
                {
                    name: '规划用地',
                    type: 'bar',
                    barWidth: 10,
                    stack: '平方米',
                    data: [298.92, 629.28, 138.1, 0, 1066.3],
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgb(255,253,253)'
                            }, {
                                offset: 1,
                                color: 'rgb(240,255,240)'
                            }])
                        }
                    }
                },
                {
                    name: '规划用地面积',
                    type: 'bar',
                    barWidth: 10,
                    data: [605.19, 1067.26, 364.96, 0, 2037.41],
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgb(0,202,220)'
                            }, {
                                offset: 1,
                                color: 'rgb(17,85,104)'
                            }])
                        }
                    }
                },
            ]
        };
        chart_2=mychart("chart2",option);
    }

    function mychart(id, option) {
        var dom = document.getElementById(id);
        var mychart = echarts.init(dom);
        if (option && typeof option === "object") {
            mychart.setOption(option, true);
        }
        return mychart;
    }

    function pie1() {
        var trafficWay = [{
            name: '在建项目',
            value: 20
        }, {
            name: '已建项目',
            value: 10
        }, {
            name: '规划项目',
            value: 30
        }];

        var data = [];
        var color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
        for (var i = 0; i < trafficWay.length; i++) {
            data.push({
                value: trafficWay[i].value,
                name: trafficWay[i].name,
                itemStyle: {
                    normal: {
                        borderWidth: 5,
                        shadowBlur: 20,
                        borderColor: color[i],
                        shadowColor: color[i]
                    }
                }
            }, {
                value: 2,
                name: '',
                itemStyle: {
                    normal: {
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                        color: 'rgba(0, 0, 0, 0)',
                        borderColor: 'rgba(0, 0, 0, 0)',
                        borderWidth: 0
                    }
                }
            });
        }
        var seriesOption = [{
            name: '',
            type: 'pie',
            clockWise: false,
            radius: ["60%", "60%"],
            hoverAnimation: false,
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        position: 'outside',
                        color: '#ddd',
                        formatter: function(params) {
//                            var percent = 0;
//                            var total = 0;
//                            for (var i = 0; i < trafficWay.length; i++) {
//                                total += trafficWay[i].value;
//                            }
//                            percent = ((params.value / total) * 100).toFixed(0);
                            if (params.name !== '') {
                                return params.name+"：" + params.value;
                            } else {
                                return '';
                            }
                        },
                    },
                    labelLine: {
                        length: 5,
                        length2: 5,
                        show: true,
                        color: '#00ffff'
                    }
                }
            },
            data: data
        }];
        var option = {
            color: color,
            title: {
                text: '重大项目',
                top: '40%',
                textAlign: "center",
                left: "49%",
                textStyle: {
                    color: '#00E4FD',
                    fontSize: 14,
                    fontWeight: '100'
                }
            },
            tooltip: {
                show: false
            },
            toolbox: {
                show: false
            },
            series: seriesOption
        }
        pie_1=mychart("pie1",option);
    }

    function pie2() {
        var color = ['rgb(0,226,251)', 'rgb(0,199,251)', 'rgb(0,134,255)', 'rgb(0,99,251)']
        var option = {
            color: color,
            series: [
                {
                    type: 'pie',
                    radius: '60%',
                    center: ['50%', '50%'],
                    data: [
                        {value: 335, name: '居中用地（R）'},
                        {value: 310, name: '商业服务业设施用地（B）'},
                        {value: 274, name: '公共管理与公共设施用地（A）'},
                        {value: 235, name: '绿地与广场用地（G）'}
                    ].sort(function (a, b) {
                        return a.value - b.value;
                    }),
                    roseType: 'radius',
                    labelLine: {
                        smooth: 0.2,
                        length: 1,
                        length2: 1
                    },
                    label: {
                        formatter: function (params) {
//                            var percent = 0;
//                            var total = 0;
//                            for (var i = 0; i < trafficWay.length; i++) {
//                                total += trafficWay[i].value;
//                            }
//                            percent = ((params.value / total) * 100).toFixed(0);
                            if (params.name !== '') {
                                return params.name + "：" + params.value;
                            } else {
                                return '';
                            }
                        }
                    },
                    itemStyle: {
                        shadowBlur: 200,
                        shadowColor: 'rgba(0, 0, 0, 0.6)'
                    },
                    animationType: 'scale',
                    animationEasing: 'elasticOut',
                    animationDelay: function (idx) {
                        return Math.random() * 200;
                    }
                }
            ]
        };
        pie_2 = mychart("pie2", option);
    }

    window.onresize = function () {
        pie_2.resize();
        pie_1.resize();
        chart_1.resize();
        chart_2.resize();
    }

</script>
</html>